import React, { Component } from "react";
import {
    Layout, Menu, Icon, Table, Divider, Button, Modal, Form, Input,
    TimePicker, Popconfirm, message, Alert, DatePicker, Tree, Steps,
    Select, Tabs, List, Card, Collapse, Dropdown, Drawer, Skeleton,
    Transfer, Tag, Col, Row, Avatar, AutoComplete, Empty, notification,
    Progress, Spin, Rate, Upload
} from "antd";
import moment from 'moment';
import { getIndividualInspectNumRankApi, getInspectClassRatesApi, getIndividualInspectPointsRankApi, getInspectClassPointsRankApi } from "../js/dailystatistics.js";
import {
    getPatrolNumRankApi, getBranchCompusApi, getPatrolRatesRankApi, getPatrolPointsRankApi,
    getDangerNumRankApi, getDangerCategoryApi, getDangerDealRateApi
} from "../js/dailystatistics.js";
import * as echarts from 'echarts'


const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const { WeekPicker } = DatePicker;

const dateFormat = 'YYYY-MM-DD';

//个人巡更次数排名
class patrolNumRank extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            searchData: [],
            branchCampus: [],
            searchChartLoading: true,
            chartSearchData: {},
            chartSearchAvg: "",
            startTime: "",
            endTime: "",
            isSearch: false,
            schoolId: sessionStorage.getItem("departmentId")
        };
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.refreshData();
    }
    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期

        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth() + 1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19

        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期

        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeweek
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        var startTime = this.getBeforeWeekTime()
        var endTime = this.getBeforeDayTime()
        console.log(startTime)
        // getPatrolNumRankApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
        //     .then((res) => {
        //         res.data.patrolnumrankList.forEach((item, index) => {
        //             columnData.push({
        //                 key: index + 1,
        //                 username: item.username,
        //                 patrolnum: item.patrolnum,
        //             });
        //         });
        //         this.setState({
        //             columnData: columnData,
        //             tableLoading: false,
        //             alertVisible: false,
        //             startTime: startTime,
        //             endTime: endTime,
        //         });
        //     })
        //     .catch((e) => {
        //         if (e.response) {
        //             //请求已发出，服务器返回状态码不是2xx。
        //             console.info(e.response.data)
        //             console.info(e.response.status)
        //             console.info(e.response.headers)
        //         } else if (e.request) {
        //             // 请求已发出，但没有收到响应
        //             // e.request 在浏览器里是一个XMLHttpRequest实例，
        //             // 在node中是一个http.ClientRequest实例
        //             console.info(e.request)
        //         } else {
        //             //发送请求时异常，捕捉到错误
        //             console.info('error', e.message)
        //         }
        //         console.info(e.config)
        //     });
        // getBranchCompusApi(parseInt(sessionStorage.getItem("departmentId")))
        //     .then((res) => {

        //         console.log("res.data==================", res.data)
        //         this.setState({
        //             branchCampus: res.data,
        //         });

        //     })


        getPatrolNumRankApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                if (res.data.patrolnumrankList.length == 0) {
                    this.setState({
                        columnData: [],
                        chartSearchData: [],
                        tableLoading: false,
                        isSearch: false
                    });
                } else {
                    let chartSearchData = {
                        key: [],
                        value: [],
                    };
                    let chartSearchAvg = "";
                    res.data.patrolnumrankList.forEach((item, index) => {
                        columnData.push({
                            key: index + 1,
                            username: item.username,
                            patrolnum: item.patrolnum,
                        });
                        chartSearchData.key.push(item.username);
                        chartSearchData.value.push(item.patrolnum);
                    });
                    chartSearchAvg = res.data.patrolnumavg
                    this.setState({
                        columnData: columnData,
                        searchChartLoading: false,
                        chartSearchData: chartSearchData,
                        chartSearchAvg: chartSearchAvg,
                        tableLoading: false,
                        alertVisible: false,
                        isSearch: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    searchSubmit = (e) => {
        var schoolId;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.deadline == undefined && values.schools == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else {
                if (values.schools != undefined) {
                    schoolId = values.schools
                } else {
                    schoolId = sessionStorage.getItem("departmentId")
                }
                this.setState({
                    tableLoading: true
                });
                let columnData = [];
                getPatrolNumRankApi(parseInt(schoolId), this.state.startTime, this.state.endTime)
                    .then((res) => {
                        if (res.data.patrolnumrankList.length == 0) {
                            this.setState({
                                columnData: [],
                                chartSearchData: [],
                                tableLoading: false,
                                isSearch: false
                            });
                        } else {
                            let chartSearchData = {
                                key: [],
                                value: [],
                            };
                            let chartSearchAvg = "";
                            res.data.patrolnumrankList.forEach((item, index) => {
                                columnData.push({
                                    key: index + 1,
                                    username: item.username,
                                    patrolnum: item.patrolnum,
                                });
                                chartSearchData.key.push(item.username);
                                chartSearchData.value.push(item.patrolnum);
                            });
                            chartSearchAvg = res.data.patrolnumavg
                            this.setState({
                                columnData: columnData,
                                searchChartLoading: false,
                                chartSearchData: chartSearchData,
                                chartSearchAvg: chartSearchAvg,
                                tableLoading: false,
                                alertVisible: false,
                                isSearch: true
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

            }
        });
    }
    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }
    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }
    handleSearchReset = clearFilters => () => {
        clearFilters();
    }
    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
        // this.setState({
        //     isSearch: false,
        // })
    }

    setFullScreen(opts) {
        this.setState({
            fullScreenVisible: true,
        })
        let fullchart = echarts.init(document.getElementById('fullScreen'))
        fullchart.setOption(opts);
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }
    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }

    }

    render() {
        // let branchCampusOptions;
        // if (this.state.branchCampus.length != 0) {
        //     branchCampusOptions = this.state.branchCampus.map((d, index) =>
        //         <Option value={d.id} key={index}>{d.name}</Option>
        //     );
        // }
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columnsSearch = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "姓名",
            dataIndex: "username",
            key: "username",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.username.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "巡更次数",
            dataIndex: "patrolnum",
            key: "patrolnum",
            sorter: (a, b) => a.patrolnum - b.patrolnum,
            sortDirections: ['descend', 'ascend'],
        }]
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };


        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="统计时段"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.getBeforeWeekTime(), dateFormat),
                                        moment(this.getBeforeDayTime(), dateFormat),
                                    ],
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format="YYYY-MM-DD"
                                        onChange={this.handleSelectTime} />
                                )}
                            </FormItem>
                        </Col>
                        {/* <Col span={8}>
                            <FormItem
                                label="分校"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schools", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择其他校区">
                                        {branchCampusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col> */}
                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div>
                    {
                        this.state.isSearch ?
                            (
                                <div style={{
                                    marginBottom: 16,
                                    padding: 16,
                                    width: '100%',
                                    height: 300,
                                    border: '1px solid',
                                    borderColor: '#f5f5f5'
                                }}>
                                    <Skeleton loading={this.state.searchChartLoading} active>
                                        <ChartSearch
                                            that={this}
                                            chartData={this.state.chartSearchData}
                                            chartAvg={this.state.chartSearchAvg} />
                                    </Skeleton>
                                </div>
                            ) : null
                    }

                    <Alert
                        message="巡更次数计算说明"
                        description={"巡更次数：在统计时间范围内，巡更人员完成巡更次数。"}
                        type="info"
                        showIcon
                    />
                    <Table
                        dataSource={this.state.columnData}
                        columns={columnsSearch}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        onChange={this.handleChange2}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                        pagination={{  //分页
                            total: this.state.searchData.length, //数据总数量
                            defaultPageSize: 10, //默认显示几条一页
                            //pageSize: 10,
                            showTotal: function (total) {  //设置显示一共几条数据
                                return '共 ' + total + ' 条数据';
                            },
                            showSizeChanger: true,
                            showQuickJumper: true,
                            pageSizeOptions: [5, 10, 20, 30]
                        }} />
                </div>
            </div>
        );
    }
}
const PatrolNumRank = Form.create()(patrolNumRank);

//个人巡更完成率排名
class patrolRatesRank extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            searchData: [],
            branchCampus: [],
            searchChartLoading: true,
            chartSearchData: {},
            chartSearchData2: [],
            startTime: "",
            endTime: "",
            isSearch: false,
            schoolId: sessionStorage.getItem("departmentId")
        };
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.refreshData();
    }
    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期

        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth() + 1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19

        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期

        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeweek
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        var startTime = this.getBeforeWeekTime()
        var endTime = this.getBeforeDayTime()
        // getPatrolRatesRankApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
        //     .then((res) => {
        //         res.data.patrolratesrankList.forEach((item, index) => {
        //             columnData.push({
        //                 key: index + 1,
        //                 username: item.username,
        //                 patrolratesavg: item.patrolratesavg,
        //             });
        //         });
        //         this.setState({
        //             columnData: columnData,
        //             tableLoading: false,
        //             alertVisible: false,
        //             startTime: startTime,
        //             endTime: endTime,
        //         });
        //     })
        //     .catch((e) => {
        //         if (e.response) {
        //             //请求已发出，服务器返回状态码不是2xx。
        //             console.info(e.response.data)
        //             console.info(e.response.status)
        //             console.info(e.response.headers)
        //         } else if (e.request) {
        //             // 请求已发出，但没有收到响应
        //             // e.request 在浏览器里是一个XMLHttpRequest实例，
        //             // 在node中是一个http.ClientRequest实例
        //             console.info(e.request)
        //         } else {
        //             //发送请求时异常，捕捉到错误
        //             console.info('error', e.message)
        //         }
        //         console.info(e.config)
        //     });
        // getBranchCompusApi(parseInt(sessionStorage.getItem("departmentId")))
        //     .then((res) => {
        //         this.setState({
        //             branchCampus: res.data,
        //         });

        //     })

        getPatrolRatesRankApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                if (res.data.patrolratesrankList.length == 0) {
                    this.setState({
                        columnData: [],
                        chartSearchData: [],
                        tableLoading: false,
                        isSearch: false
                    });
                } else {
                    let chartSearchData = {
                        key: [],
                        value: [],
                    };
                    let chartSearchData2 = []
                    let chartSearchAvg = ""
                    res.data.patrolratesrankList.forEach((item, index) => {
                        columnData.push({
                            key: index + 1,
                            username: item.username,
                            patrolratesavg: item.patrolratesavg,
                        });
                        chartSearchData.key.push(item.username);
                        chartSearchData.value.push(item.patrolratesavg);
                    });
                    chartSearchAvg = res.data.patrolratesavg
                    if (res.data.patrolnumtotal - res.data.patrolnumreal > 0) {
                        chartSearchData2.push({
                            patrolnumreal: res.data.patrolnumreal,
                            patrolnumtotal: res.data.patrolnumtotal - res.data.patrolnumreal,
                            patrolrates: res.data.patrolrates
                        })
                    } else {
                        chartSearchData2.push({
                            patrolnumreal: res.data.patrolnumreal,
                            patrolnumtotal: 0,
                            patrolrates: res.data.patrolrates
                        })
                    }
                    this.setState({
                        columnData: columnData,
                        searchChartLoading: false,
                        chartSearchData: chartSearchData,
                        chartSearchData2: chartSearchData2,
                        chartSearchAvg: chartSearchAvg,
                        tableLoading: false,
                        alertVisible: false,
                        isSearch: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    searchSubmit = (e) => {
        var schoolId;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.deadline == undefined && values.schools == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else {
                if (values.schools != undefined) {
                    schoolId = values.schools
                } else {
                    schoolId = sessionStorage.getItem("departmentId")
                }
                this.setState({
                    tableLoading: true
                });
                let columnData = [];
                getPatrolRatesRankApi(parseInt(schoolId), this.state.startTime, this.state.endTime)
                    .then((res) => {
                        if (res.data.patrolratesrankList.length == 0) {
                            this.setState({
                                columnData: [],
                                chartSearchData: [],
                                tableLoading: false,
                                isSearch: false
                            });
                        } else {
                            let chartSearchData = {
                                key: [],
                                value: [],
                            };
                            let chartSearchData2 = []
                            let chartSearchAvg = ""
                            res.data.patrolratesrankList.forEach((item, index) => {
                                columnData.push({
                                    key: index + 1,
                                    username: item.username,
                                    patrolratesavg: item.patrolratesavg,
                                });
                                chartSearchData.key.push(item.username);
                                chartSearchData.value.push(item.patrolratesavg);
                            });
                            chartSearchAvg = res.data.patrolratesavg
                            if (res.data.patrolnumtotal - res.data.patrolnumreal > 0) {
                                chartSearchData2.push({
                                    patrolnumreal: res.data.patrolnumreal,
                                    patrolnumtotal: res.data.patrolnumtotal - res.data.patrolnumreal,
                                    patrolrates: res.data.patrolrates
                                })
                            } else {
                                chartSearchData2.push({
                                    patrolnumreal: res.data.patrolnumreal,
                                    patrolnumtotal: 0,
                                    patrolrates: res.data.patrolrates
                                })
                            }
                            this.setState({
                                columnData: columnData,
                                searchChartLoading: false,
                                chartSearchData: chartSearchData,
                                chartSearchData2: chartSearchData2,
                                chartSearchAvg: chartSearchAvg,
                                tableLoading: false,
                                alertVisible: false,
                                isSearch: true
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

            }
        });
    }
    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }
    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }
    handleSearchReset = clearFilters => () => {
        clearFilters();
    }
    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
        // this.setState({
        //     isSearch: false,
        // })
    }

    setFullScreen(opts) {
        this.setState({
            fullScreenVisible: true,
        })
        let fullchart = echarts.init(document.getElementById('fullScreen'))
        fullchart.setOption(opts);
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }
    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }

    }

    render() {
        // let branchCampusOptions;
        // if (this.state.branchCampus.length != 0) {
        //     branchCampusOptions = this.state.branchCampus.map((d, index) =>
        //         <Option value={d.id} key={index}>{d.name}</Option>
        //     );
        // }
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columnsSearch = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "姓名",
            dataIndex: "username",
            key: "username",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.username.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "巡更完成率(%)",
            dataIndex: "patrolratesavg",
            key: "patrolratesavg",
            sorter: (a, b) => a.patrolratesavg - b.patrolratesavg,
            sortDirections: ['descend', 'ascend'],
        }]
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };


        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="统计时段"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.getBeforeWeekTime(), dateFormat),
                                        moment(this.getBeforeDayTime(), dateFormat),
                                    ],
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format="YYYY-MM-DD"
                                        onChange={this.handleSelectTime} />
                                )}
                            </FormItem>
                        </Col>
                        {/* <Col span={8}>
                            <FormItem
                                label="分校"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schools", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择其他校区">
                                        {branchCampusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col> */}
                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div>
                    {/* {
                        this.state.isSearch ?
                            (
                                <div style={{
                                    marginBottom: 16,
                                    padding: 16,
                                    width: '100%',
                                    height: 230,
                                    border: '1px solid',
                                    borderColor: '#f5f5f5'
                                }}>
                                    <Skeleton loading={this.state.searchChartLoading} active>
                                        <ChartSearch4
                                            that={this}
                                            chartData={this.state.chartSearchData2}
                                        />
                                    </Skeleton>
                                </div>
                            ) : null
                    } */}
                    {
                        this.state.isSearch ?
                            (
                                <div style={{
                                    marginBottom: 16,
                                    padding: 16,
                                    width: '100%',
                                    height: 300,
                                    border: '1px solid',
                                    borderColor: '#f5f5f5'
                                }}>
                                    <Skeleton loading={this.state.searchChartLoading} active>
                                        <ChartSearch2
                                            that={this}
                                            chartData={this.state.chartSearchData}
                                            chartAvg={this.state.chartSearchAvg} />
                                    </Skeleton>
                                </div>
                            ) : null
                    }

                    <Alert
                        message="巡更完成率计算说明"
                        description={
                            "巡更完成率：在统计时间范围内，巡更人员实际打卡点位数 / 计划完成打卡点位数。"}
                        type="info"
                        showIcon
                    />
                    <Table
                        dataSource={this.state.columnData}
                        columns={columnsSearch}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        onChange={this.handleChange2}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                        pagination={{  //分页
                            total: this.state.searchData.length, //数据总数量
                            defaultPageSize: 10, //默认显示几条一页
                            //pageSize: 10,
                            showTotal: function (total) {  //设置显示一共几条数据
                                return '共 ' + total + ' 条数据';
                            },
                            showSizeChanger: true,
                            showQuickJumper: true,
                            pageSizeOptions: [5, 10, 20, 30]
                        }} />
                </div>
            </div>
        );
    }
}

const PatrolRatesRank = Form.create()(patrolRatesRank);

//个人巡更积分排名
class patrolPointsRank extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            searchData: [],
            branchCampus: [],
            searchChartLoading: true,
            chartSearchData: {},
            startTime: "",
            endTime: "",
            isSearch: false,
            schoolId: sessionStorage.getItem("departmentId")
        };
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.refreshData();
    }
    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期

        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth() + 1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19

        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期

        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeweek
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        var startTime = this.getBeforeWeekTime()
        var endTime = this.getBeforeDayTime()
        // getPatrolPointsRankApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
        //     .then((res) => {
        //         res.data.patrolpointsrankList.forEach((item, index) => {
        //             columnData.push({
        //                 key: index + 1,
        //                 username: item.username,
        //                 patrolpoints: item.patrolpoints,
        //             });
        //         });
        //         this.setState({
        //             columnData: columnData,
        //             tableLoading: false,
        //             alertVisible: false,
        //             startTime: startTime,
        //             endTime: endTime,
        //         });
        //     })
        //     .catch((e) => {
        //         if (e.response) {
        //             //请求已发出，服务器返回状态码不是2xx。
        //             console.info(e.response.data)
        //             console.info(e.response.status)
        //             console.info(e.response.headers)
        //         } else if (e.request) {
        //             // 请求已发出，但没有收到响应
        //             // e.request 在浏览器里是一个XMLHttpRequest实例，
        //             // 在node中是一个http.ClientRequest实例
        //             console.info(e.request)
        //         } else {
        //             //发送请求时异常，捕捉到错误
        //             console.info('error', e.message)
        //         }
        //         console.info(e.config)
        // });
        // getBranchCompusApi(parseInt(sessionStorage.getItem("departmentId")))
        //     .then((res) => {
        //         this.setState({
        //             branchCampus: res.data,
        //         });

        //     })

        getPatrolPointsRankApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                if (res.data.patrolpointsrankList.length == 0) {
                    this.setState({
                        columnData: [],
                        chartSearchData: [],
                        tableLoading: false,
                        isSearch: false
                    });
                } else {
                    let chartSearchData = {
                        key: [],
                        value: [],
                    };
                    let chartSearchAvg = ""
                    res.data.patrolpointsrankList.forEach((item, index) => {
                        columnData.push({
                            key: index + 1,
                            username: item.username,
                            patrolpoints: item.patrolpoints,
                        });
                        chartSearchData.key.push(item.username);
                        chartSearchData.value.push(item.patrolpoints);
                    });
                    chartSearchAvg = res.data.patrolpointsavg
                    this.setState({
                        columnData: columnData,
                        searchChartLoading: false,
                        chartSearchData: chartSearchData,
                        chartSearchAvg: chartSearchAvg,
                        tableLoading: false,
                        alertVisible: false,
                        isSearch: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }

    searchSubmit = (e) => {
        var schoolId;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.deadline == undefined && values.schools == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else {
                if (values.schools != undefined) {
                    schoolId = values.schools
                } else {
                    schoolId = sessionStorage.getItem("departmentId")
                }
                this.setState({
                    tableLoading: true
                });
                let columnData = [];
                getPatrolPointsRankApi(parseInt(schoolId), this.state.startTime, this.state.endTime)
                    .then((res) => {
                        if (res.data.patrolpointsrankList.length == 0) {
                            this.setState({
                                columnData: [],
                                chartSearchData: [],
                                tableLoading: false,
                                isSearch: false
                            });
                        } else {
                            let chartSearchData = {
                                key: [],
                                value: [],
                            };
                            let chartSearchAvg = ""
                            res.data.patrolpointsrankList.forEach((item, index) => {
                                columnData.push({
                                    key: index + 1,
                                    username: item.username,
                                    patrolpoints: item.patrolpoints,
                                });
                                chartSearchData.key.push(item.username);
                                chartSearchData.value.push(item.patrolpoints);
                            });
                            chartSearchAvg = res.data.patrolpointsavg
                            this.setState({
                                columnData: columnData,
                                searchChartLoading: false,
                                chartSearchData: chartSearchData,
                                chartSearchAvg: chartSearchAvg,
                                tableLoading: false,
                                alertVisible: false,
                                isSearch: true
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

            }
        });
    }
    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }
    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }
    handleSearchReset = clearFilters => () => {
        clearFilters();
    }
    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
        // this.setState({
        //     isSearch: false,
        // })
    }

    setFullScreen(opts) {
        this.setState({
            fullScreenVisible: true,
        })
        let fullchart = echarts.init(document.getElementById('fullScreen'))
        fullchart.setOption(opts);
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }
    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }

    }

    render() {
        // let branchCampusOptions;
        // if (this.state.branchCampus.length != 0) {
        //     branchCampusOptions = this.state.branchCampus.map((d, index) =>
        //         <Option value={d.id} key={index}>{d.name}</Option>
        //     );
        // }
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columnsSearch = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "姓名",
            dataIndex: "username",
            key: "username",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.username.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "巡更积分",
            dataIndex: "patrolpoints",
            key: "patrolpoints",
            sorter: (a, b) => a.patrolpoints - b.patrolpoints,
            sortDirections: ['descend', 'ascend'],
        }]
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };


        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="统计时段"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.getBeforeWeekTime(), dateFormat),
                                        moment(this.getBeforeDayTime(), dateFormat),
                                    ],
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format="YYYY-MM-DD"
                                        onChange={this.handleSelectTime} />
                                )}
                            </FormItem>
                        </Col>
                        {/* <Col span={8}>
                            <FormItem
                                label="分校"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schools", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择其他校区">
                                        {branchCampusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col> */}
                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div>
                    {
                        this.state.isSearch ?
                            (
                                <div style={{
                                    marginBottom: 16,
                                    padding: 16,
                                    width: '100%',
                                    height: 300,
                                    border: '1px solid',
                                    borderColor: '#f5f5f5'
                                }}>
                                    <Skeleton loading={this.state.searchChartLoading} active>
                                        <ChartSearch3
                                            that={this}
                                            chartData={this.state.chartSearchData}
                                            chartAvg={this.state.chartSearchAvg} />
                                    </Skeleton>
                                </div>
                            ) : null
                    }

                    <Alert
                        message="巡更积分计算说明"
                        description={"巡更积分：在统计时间范围内，巡更人员巡更次数 * 巡更完成率。"}
                        type="info"
                        showIcon
                    />
                    <Table
                        dataSource={this.state.columnData}
                        columns={columnsSearch}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        onChange={this.handleChange2}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                        pagination={{  //分页
                            total: this.state.searchData.length, //数据总数量
                            defaultPageSize: 10, //默认显示几条一页
                            //pageSize: 10,
                            showTotal: function (total) {  //设置显示一共几条数据
                                return '共 ' + total + ' 条数据';
                            },
                            showSizeChanger: true,
                            showQuickJumper: true,
                            pageSizeOptions: [5, 10, 20, 30]
                        }} />
                </div>
            </div>
        );
    }
}
const PatrolPointsRank = Form.create()(patrolPointsRank);

//个人隐患次数上报排名
class dangerNumRank extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            searchData: [],
            branchCampus: [],
            searchChartLoading: true,
            chartSearchData: {},
            chartSearchAvg: "",
            startTime: "",
            endTime: "",
            isSearch: false,
            schoolId: sessionStorage.getItem("departmentId")
        };
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.refreshData();
    }
    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期

        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth() + 1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19

        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期

        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeweek
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        var startTime = this.getBeforeWeekTime()
        var endTime = this.getBeforeDayTime()
        // getDangerNumRankApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
        //     .then((res) => {
        //         res.data.dangernumrankList.forEach((item, index) => {
        //             columnData.push({
        //                 key: index + 1,
        //                 username: item.username,
        //                 dangernum: item.dangernum,
        //             });
        //         });
        //         this.setState({
        //             columnData: columnData,
        //             tableLoading: false,
        //             alertVisible: false,
        //             startTime: startTime,
        //             endTime: endTime,
        //         });
        //     })
        //     .catch((e) => {
        //         if (e.response) {
        //             //请求已发出，服务器返回状态码不是2xx。
        //             console.info(e.response.data)
        //             console.info(e.response.status)
        //             console.info(e.response.headers)
        //         } else if (e.request) {
        //             // 请求已发出，但没有收到响应
        //             // e.request 在浏览器里是一个XMLHttpRequest实例，
        //             // 在node中是一个http.ClientRequest实例
        //             console.info(e.request)
        //         } else {
        //             //发送请求时异常，捕捉到错误
        //             console.info('error', e.message)
        //         }
        //         console.info(e.config)
        //     });
        // getBranchCompusApi(parseInt(sessionStorage.getItem("departmentId")))
        //     .then((res) => {
        //         this.setState({
        //             branchCampus: res.data,
        //         });

        //     })

        getDangerNumRankApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                if (res.data.dangernumrankList.length == 0) {
                    this.setState({
                        columnData: [],
                        chartSearchData: [],
                        tableLoading: false,
                        isSearch: false
                    });
                } else {
                    let chartSearchData = {
                        key: [],
                        value: [],
                    };
                    let chartSearchAvg = "";
                    res.data.dangernumrankList.forEach((item, index) => {
                        columnData.push({
                            key: index + 1,
                            username: item.username,
                            dangernum: item.dangernum,
                        });
                        chartSearchData.key.push(item.username);
                        chartSearchData.value.push(item.dangernum);
                    });
                    chartSearchAvg = res.data.dangernumavg
                    this.setState({
                        columnData: columnData,
                        searchChartLoading: false,
                        chartSearchData: chartSearchData,
                        chartSearchAvg: chartSearchAvg,
                        tableLoading: false,
                        alertVisible: false,
                        isSearch: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }

    searchSubmit = (e) => {
        var schoolId;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.deadline == undefined && values.schools == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else {
                if (values.schools != undefined) {
                    schoolId = values.schools
                } else {
                    schoolId = sessionStorage.getItem("departmentId")
                }
                this.setState({
                    tableLoading: true
                });
                let columnData = [];
                getDangerNumRankApi(parseInt(schoolId), this.state.startTime, this.state.endTime)
                    .then((res) => {
                        if (res.data.dangernumrankList.length == 0) {
                            this.setState({
                                columnData: [],
                                chartSearchData: [],
                                tableLoading: false,
                                isSearch: false
                            });
                        } else {
                            let chartSearchData = {
                                key: [],
                                value: [],
                            };
                            let chartSearchAvg = "";
                            res.data.dangernumrankList.forEach((item, index) => {
                                columnData.push({
                                    key: index + 1,
                                    username: item.username,
                                    dangernum: item.dangernum,
                                });
                                chartSearchData.key.push(item.username);
                                chartSearchData.value.push(item.dangernum);
                            });
                            chartSearchAvg = res.data.dangernumavg
                            this.setState({
                                columnData: columnData,
                                searchChartLoading: false,
                                chartSearchData: chartSearchData,
                                chartSearchAvg: chartSearchAvg,
                                tableLoading: false,
                                alertVisible: false,
                                isSearch: true
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

            }
        });
    }
    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }
    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }
    handleSearchReset = clearFilters => () => {
        clearFilters();
    }
    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
        // this.setState({
        //     isSearch: false,
        // })
    }

    setFullScreen(opts) {
        this.setState({
            fullScreenVisible: true,
        })
        let fullchart = echarts.init(document.getElementById('fullScreen'))
        fullchart.setOption(opts);
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }
    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }

    }

    render() {
        // let branchCampusOptions;
        // if (this.state.branchCampus.length != 0) {
        //     branchCampusOptions = this.state.branchCampus.map((d, index) =>
        //         <Option value={d.id} key={index}>{d.name}</Option>
        //     );
        // }
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columnsSearch = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "姓名",
            dataIndex: "username",
            key: "username",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.username.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "隐患次数",
            dataIndex: "dangernum",
            key: "dangernum",
            sorter: (a, b) => a.dangernum - b.dangernum,
            sortDirections: ['descend', 'ascend'],
        }]
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };


        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="统计时段"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.getBeforeWeekTime(), dateFormat),
                                        moment(this.getBeforeDayTime(), dateFormat),
                                    ],
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format="YYYY-MM-DD"
                                        onChange={this.handleSelectTime} />
                                )}
                            </FormItem>
                        </Col>
                        {/* <Col span={8}>
                            <FormItem
                                label="分校"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schools", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择其他校区">
                                        {branchCampusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col> */}
                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div>
                    {
                        this.state.isSearch ?
                            (
                                <div style={{
                                    marginBottom: 16,
                                    padding: 16,
                                    width: '100%',
                                    height: 300,
                                    border: '1px solid',
                                    borderColor: '#f5f5f5'
                                }}>
                                    <Skeleton loading={this.state.searchChartLoading} active>
                                        <ChartSearch5
                                            that={this}
                                            chartData={this.state.chartSearchData}
                                            chartAvg={this.state.chartSearchAvg} />
                                    </Skeleton>
                                </div>
                            ) : null
                    }
                    <Table
                        dataSource={this.state.columnData}
                        columns={columnsSearch}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        onChange={this.handleChange2}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                        pagination={{  //分页
                            total: this.state.searchData.length, //数据总数量
                            defaultPageSize: 10, //默认显示几条一页
                            //pageSize: 10,
                            showTotal: function (total) {  //设置显示一共几条数据
                                return '共 ' + total + ' 条数据';
                            },
                            showSizeChanger: true,
                            showQuickJumper: true,
                            pageSizeOptions: [5, 10, 20, 30]
                        }} />
                </div>
            </div>
        );
    }
}
const DangerNumRank = Form.create()(dangerNumRank);

//学校隐患分布情况
class dangerCategory extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            searchData: [],
            branchCampus: [],
            searchChartLoading: true,
            chartSearchData: [],
            startTime: "",
            endTime: "",
            isSearch: false,
            schoolId: sessionStorage.getItem("departmentId")
        };
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.refreshData();
    }
    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期

        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth() + 1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19

        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期

        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeweek
    }
    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        var startTime = this.getBeforeWeekTime()
        var endTime = this.getBeforeDayTime()
        // getDangerCategoryApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
        //     .then((res) => {
        //         res.data.forEach((item, index) => {
        //             columnData.push({
        //                 key: index + 1,
        //                 category: item.category,
        //                 num: item.num,
        //             });
        //         });
        //         this.setState({
        //             columnData: columnData,
        //             tableLoading: false,
        //             alertVisible: false,
        //             startTime: startTime,
        //             endTime: endTime,
        //         });
        //     })
        //     .catch((e) => {
        //         if (e.response) {
        //             //请求已发出，服务器返回状态码不是2xx。
        //             console.info(e.response.data)
        //             console.info(e.response.status)
        //             console.info(e.response.headers)
        //         } else if (e.request) {
        //             // 请求已发出，但没有收到响应
        //             // e.request 在浏览器里是一个XMLHttpRequest实例，
        //             // 在node中是一个http.ClientRequest实例
        //             console.info(e.request)
        //         } else {
        //             //发送请求时异常，捕捉到错误
        //             console.info('error', e.message)
        //         }
        //         console.info(e.config)
        //     });
        // getBranchCompusApi(parseInt(sessionStorage.getItem("departmentId")))
        //     .then((res) => {
        //         this.setState({
        //             branchCampus: res.data,
        //         });

        //     })

        getDangerCategoryApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                if (res.data.length == 0) {
                    this.setState({
                        columnData: [],
                        chartSearchData: [],
                        tableLoading: false,
                        isSearch: false
                    });
                } else {
                    let chartSearchData = []
                    res.data.forEach((item, index) => {
                        columnData.push({
                            key: index + 1,
                            category: item.category,
                            num: item.num,
                        });
                        chartSearchData.push({
                            name: item.category,
                            value: item.num
                        })
                    });
                    this.setState({
                        columnData: columnData,
                        searchChartLoading: false,
                        chartSearchData: chartSearchData,
                        tableLoading: false,
                        alertVisible: false,
                        isSearch: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    searchSubmit = (e) => {
        var schoolId;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.deadline == undefined && values.schools == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else {
                if (values.schools != undefined) {
                    schoolId = values.schools
                } else {
                    schoolId = sessionStorage.getItem("departmentId")
                }
                this.setState({
                    tableLoading: true
                });
                let columnData = [];
                getDangerCategoryApi(parseInt(schoolId), this.state.startTime, this.state.endTime)
                    .then((res) => {
                        if (res.data.length == 0) {
                            this.setState({
                                columnData: [],
                                chartSearchData: [],
                                tableLoading: false,
                                isSearch: false
                            });
                        } else {
                            let chartSearchData = []
                            res.data.forEach((item, index) => {
                                columnData.push({
                                    key: index + 1,
                                    category: item.category,
                                    num: item.num,
                                });
                                chartSearchData.push({
                                    name: item.category,
                                    value: item.num
                                })
                            });
                            this.setState({
                                columnData: columnData,
                                searchChartLoading: false,
                                chartSearchData: chartSearchData,
                                tableLoading: false,
                                alertVisible: false,
                                isSearch: true
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

            }
        });
    }
    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }
    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }
    handleSearchReset = clearFilters => () => {
        clearFilters();
    }
    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
        // this.setState({
        //     isSearch: false,
        // })
    }

    setFullScreen(opts) {
        this.setState({
            fullScreenVisible: true,
        })
        let fullchart = echarts.init(document.getElementById('fullScreen'))
        fullchart.setOption(opts);
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }
    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }

    }

    render() {
        // let branchCampusOptions;
        // if (this.state.branchCampus.length != 0) {
        //     branchCampusOptions = this.state.branchCampus.map((d, index) =>
        //         <Option value={d.id} key={index}>{d.name}</Option>
        //     );
        // }
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columnsSearch = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "隐患类别",
            dataIndex: "category",
            key: "category",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.category.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "隐患次数",
            dataIndex: "num",
            key: "num",
            sorter: (a, b) => a.num - b.num,
            sortDirections: ['descend', 'ascend'],
        }]
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };


        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="统计时段"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.getBeforeWeekTime(), dateFormat),
                                        moment(this.getBeforeDayTime(), dateFormat),
                                    ],
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format="YYYY-MM-DD"
                                        onChange={this.handleSelectTime} />
                                )}
                            </FormItem>
                        </Col>
                        {/* <Col span={8}>
                            <FormItem
                                label="分校"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schools", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择其他校区">
                                        {branchCampusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col> */}
                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div>
                    {
                        this.state.isSearch ?
                            (
                                <div style={{
                                    marginBottom: 16,
                                    padding: 16,
                                    width: '100%',
                                    height: 300,
                                    border: '1px solid',
                                    borderColor: '#f5f5f5'
                                }}>
                                    <Skeleton loading={this.state.searchChartLoading} active>
                                        <ChartSearch6
                                            that={this}
                                            chartData={this.state.chartSearchData}
                                        />
                                    </Skeleton>
                                </div>
                            ) : null
                    }
                    <Table
                        dataSource={this.state.columnData}
                        columns={columnsSearch}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        onChange={this.handleChange2}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                        pagination={{  //分页
                            total: this.state.searchData.length, //数据总数量
                            defaultPageSize: 10, //默认显示几条一页
                            //pageSize: 10,
                            showTotal: function (total) {  //设置显示一共几条数据
                                return '共 ' + total + ' 条数据';
                            },
                            showSizeChanger: true,
                            showQuickJumper: true,
                            pageSizeOptions: [5, 10, 20, 30]
                        }} />
                </div>
            </div>
        );
    }

}
const DangerCategory = Form.create()(dangerCategory);

//学校处理率
class dangerDealRate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            searchData: [],
            branchCampus: [],
            searchChartLoading: true,
            chartSearchData: {},
            chartSearchData2: [],
            startTime: "",
            endTime: "",
            isSearch: false,
            schoolId: sessionStorage.getItem("departmentId")
        };
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.refreshData();
    }
    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期

        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth() + 1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19

        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期

        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeweek
    }

    refreshData() {
        this.setState({
            searchChartLoading: true
        });
        var startTime = this.getBeforeWeekTime()
        var endTime = this.getBeforeDayTime()
        getDangerDealRateApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                let chartSearchData = []
                if (res.data[0].dangernumtotal - res.data[0].dangernumundo > 0) {
                    chartSearchData.push({
                        dangernumtotal: res.data[0].dangernumtotal - res.data[0].dangernumundo,
                        dangernumundo: res.data[0].dangernumundo,
                        dangerates: res.data[0].dangerates
                    })
                } else {
                    chartSearchData.push({
                        dangernumtotal: 0,
                        dangernumundo: res.data[0].dangernumundo,
                        dangerates: res.data[0].dangerates
                    })
                }
                this.setState({
                    searchChartLoading: false,
                    chartSearchData: chartSearchData,
                    startTime: startTime,
                    endTime: endTime,
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
        // getBranchCompusApi(parseInt(sessionStorage.getItem("departmentId")))
        //     .then((res) => {
        //         this.setState({
        //             branchCampus: res.data,
        //         });

        //     })
    }

    searchSubmit = (e) => {
        var schoolId;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.deadline == undefined && values.schools == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else {
                if (values.schools != undefined) {
                    schoolId = values.schools
                } else {
                    schoolId = sessionStorage.getItem("departmentId")
                }
                this.setState({
                    searchChartLoading: true
                });
                getDangerDealRateApi(parseInt(schoolId), this.state.startTime, this.state.endTime)
                    .then((res) => {
                        let chartSearchData = []
                        if (res.data[0].dangernumtotal - res.data[0].dangernumundo > 0) {
                            chartSearchData.push({
                                dangernumtotal: res.data[0].dangernumtotal - res.data[0].dangernumundo,
                                dangernumundo: res.data[0].dangernumundo,
                                dangerates: res.data[0].dangerates
                            })
                        } else {
                            chartSearchData.push({
                                dangernumtotal: 0,
                                dangernumundo: res.data[0].dangernumundo,
                                dangerates: res.data[0].dangerates
                            })
                        }
                        this.setState({
                            searchChartLoading: false,
                            chartSearchData: chartSearchData,
                        });

                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

            }
        });
    }
    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }
    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }
    handleSearchReset = clearFilters => () => {
        clearFilters();
    }
    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
        // this.setState({
        //     isSearch: false,
        // })
    }

    setFullScreen(opts) {
        this.setState({
            fullScreenVisible: true,
        })
        let fullchart = echarts.init(document.getElementById('fullScreen'))
        fullchart.setOption(opts);
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }
    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }

    }

    render() {
        // let branchCampusOptions;
        // if (this.state.branchCampus.length != 0) {
        //     branchCampusOptions = this.state.branchCampus.map((d, index) =>
        //         <Option value={d.id} key={index}>{d.name}</Option>
        //     );
        // }
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};

        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };


        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="统计时段"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.getBeforeWeekTime(), dateFormat),
                                        moment(this.getBeforeDayTime(), dateFormat),
                                    ],
                                })(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        format="YYYY-MM-DD"
                                        onChange={this.handleSelectTime} />
                                )}
                            </FormItem>
                        </Col>
                        {/* <Col span={8}>
                            <FormItem
                                label="分校"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schools", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择其他校区">
                                        {branchCampusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col> */}
                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div>
                    <div style={{
                        marginBottom: 16,
                        padding: 16,
                        width: '100%',
                        height: 500,
                        border: '1px solid',
                        borderColor: '#f5f5f5'
                    }}>
                        <Skeleton loading={this.state.searchChartLoading} active>
                            <ChartSearch7
                                that={this}
                                chartData={this.state.chartSearchData}
                            />
                        </Skeleton>
                    </div>
                </div>
            </div>
        );
    }
}
const DangerDealRate = Form.create()(dangerDealRate);

//巡更次数排名柱状图
class ChartSearch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that,
            chartAvg: props.chartAvg
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that,
                chartAvg: props.chartAvg
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        if (JSON.stringify(this.state.chartData) != '{}') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch'));
            chart.setOption({
                title: {
                    text: '个人巡更次数排名',
                    left: 'center',
                    top: '-2px'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5px',
                    // top: '30px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.state.chartData.key,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}次',
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '巡更次数',
                        type: 'bar',
                        barGap: '100%',
                        barMaxWidth: 25,
                        animation: false,
                        data: this.state.chartData.value,
                        itemStyle:
                            {
                                color: 'rgb(255, 70, 131)',
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 14
                                        }
                                    }
                                }
                            },
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        markLine: {
                            label: { formatter: '实际完成平均值: ' + this.state.chartAvg },
                            symbol: 'none',
                            data: [{
                                type: 'average',
                                name: '平均值',
                            }]
                        },
                        markPoint: {
                            data: [
                                {
                                    type: 'max', name: '最大值'
                                }, {
                                    type: 'min', name: '最小值'
                                }
                            ]
                        }
                    }
                ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch' style={chartStyle} />)
    }
}

//巡更完成率排名柱状图
class ChartSearch2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that,
            chartAvg: props.chartAvg
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that,
                chartAvg: props.chartAvg
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        if (JSON.stringify(this.state.chartData) != '{}') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch'));
            chart.setOption({
                title: {
                    text: '个人巡更完成率排名',
                    left: 'center',
                    top: '-2px'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5px',
                    // top: '30px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.state.chartData.key,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}%',
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '巡更完成率',
                        type: 'bar',
                        barGap: '100%',
                        barMaxWidth: 25,
                        animation: false,
                        data: this.state.chartData.value,
                        itemStyle:
                            {
                                color: 'rgb(255, 70, 131)',
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 14
                                        }
                                    }
                                }
                            },
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        markLine: {
                            label: { formatter: '平均值: ' + this.state.chartAvg },
                            symbol: 'none',
                            data: [{
                                type: 'average',
                                name: '平均值',
                            }]
                        },
                    }
                ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch' style={chartStyle} />)
    }
}

//巡更积分排名柱状图
class ChartSearch3 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that,
            chartAvg: props.chartAvg
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that,
                chartAvg: props.chartAvg
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        if (JSON.stringify(this.state.chartData) != '{}') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch'));
            chart.setOption({
                title: {
                    text: '个人巡更积分排名',
                    left: 'center',
                    top: '5px'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5px',
                    // top: '30px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.state.chartData.key,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}分',
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '巡更积分',
                        type: 'bar',
                        barGap: '100%',
                        barMaxWidth: 25,
                        animation: false,
                        data: this.state.chartData.value,
                        itemStyle:
                            {
                                color: 'rgb(255, 70, 131)',
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 14
                                        }
                                    }
                                }
                            },
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        markLine: {
                            label: { formatter: '平均值: ' + this.state.chartAvg },
                            symbol: 'none',
                            data: [{
                                type: 'average',
                                name: '平均值',
                            }]
                        },
                        markPoint: {
                            data: [
                                {
                                    type: 'max', name: '最大值'
                                }, {
                                    type: 'min', name: '最小值'
                                }
                            ]
                        }
                    }
                ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch' style={chartStyle} />)
    }
}

//巡更完成率排名饼状图
class ChartSearch4 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        console.log("this.state.chartData", this.state.chartData[0])
        if (JSON.stringify(this.state.chartData) != '[]') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch2'));
            chart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '2%',
                    left: 'center'
                },
                title: {
                    text: this.state.chartData[0].patrolrates,
                    left: 'center',
                    top: '48%',
                    textStyle: {
                        color: '#031f2d',
                        fontSize: 18,
                        align: 'center'
                    }
                },
                series: [
                    {
                        name: '巡更完成率',
                        type: 'pie',
                        radius: ['35%', '60%'],
                        center: ['50%', '55%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2,
                            normal: {
                                label: {
                                    show: true,
                                    formatter: '{b} : {c}',
                                    textStyle: {
                                        fontSize: 18
                                    },
                                },
                                labelLine: { show: true }
                            }
                        },
                        data: [
                            { value: this.state.chartData[0].patrolnumreal, name: '巡更完成次数' },
                            { value: this.state.chartData[0].patrolnumtotal, name: '巡更未完成次数' },
                        ]
                    }
                ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch2' style={chartStyle} />)
    }
}

//隐患次数排名柱状图
class ChartSearch5 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that,
            chartAvg: props.chartAvg
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that,
                chartAvg: props.chartAvg
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        if (JSON.stringify(this.state.chartData) != '{}') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch'));
            chart.setOption({
                title: {
                    text: '个人隐患上报次数',
                    left: 'center',
                    top: '-2px'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5px',
                    // top: '30px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.state.chartData.key,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}次',
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '隐患次数',
                        type: 'bar',
                        barGap: '100%',
                        barMaxWidth: 25,
                        animation: false,
                        data: this.state.chartData.value,
                        itemStyle:
                            {
                                color: 'rgb(255, 70, 131)',
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 14
                                        }
                                    }
                                }
                            },
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        markLine: {
                            label: { formatter: '平均值: ' + this.state.chartAvg },
                            symbol: 'none',
                            data: [{
                                type: 'average',
                                name: '平均值',
                            }]
                        },
                        markPoint: {
                            data: [
                                {
                                    type: 'max', name: '最大值'
                                }, {
                                    type: 'min', name: '最小值'
                                }
                            ]
                        }
                    }
                ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch' style={chartStyle} />)
    }
}

//学校隐患分布饼状图
class ChartSearch6 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        if (JSON.stringify(this.state.chartData) != '[]') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch'));
            chart.setOption({
                title: {
                    text: '学校隐患分布',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: '20%',  //图例距离左的距离
                    y: 'center',  //图例上下居中
                },
                series: [
                    {
                        name: '隐患类别分布',
                        type: 'pie',
                        radius: ['35%', '60%'],
                        center: ['50%', '55%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2,
                            normal: {
                                label: {
                                    show: true,
                                    formatter: '{b} : {c} ({d}%)',
                                    textStyle: {
                                        fontSize: 16
                                    },
                                },
                                labelLine: { show: true }
                            }
                        },
                        data: this.state.chartData
                    }
                ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch' style={chartStyle} />)
    }
}

//隐患处理率饼状图
class ChartSearch7 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        if (JSON.stringify(this.state.chartData) != '[]') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch'));
            chart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '2%',
                    left: 'center'
                },
                title: {
                    text: this.state.chartData[0].dangerates,
                    left: 'center',
                    top: '50%',
                    textStyle: {
                        color: '#031f2d',
                        fontSize: 30,
                        align: 'center'
                    }
                },
                series: [
                    {
                        name: '隐患结案率',
                        type: 'pie',
                        radius: ['35%', '60%'],
                        center: ['50%', '55%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2,
                            normal: {
                                label: {
                                    show: true,
                                    formatter: '{b} : {c}',
                                    textStyle: {
                                        fontSize: 18
                                    },
                                },
                                labelLine: { show: true }
                            }
                        },
                        data: [
                            { value: this.state.chartData[0].dangernumtotal, name: '未处理隐患数' },
                            { value: this.state.chartData[0].dangernumundo, name: '处理隐患数' },
                        ]
                    }
                ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch' style={chartStyle} />)
    }
}

//个人巡检次数
class inspectNumRank extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            searchData: [],
            branchCampus: [],
            searchChartLoading: true,
            chartSearchData: {},
            startTime: "",
            endTime: "",
            isSearch: false,
            schoolId: sessionStorage.getItem("departmentId")
        };
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.refreshData();
    }
    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期

        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth() + 1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19

        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期
        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        
        return beforeweek
    }

    formatDate(date) {
        var myyear = date.getFullYear();
        var mymonth = date.getMonth() + 1;
        var myweekday = date.getDate();
        if (mymonth < 10) {
            mymonth = "0" + mymonth;
        }
        if (myweekday < 10) {
            myweekday = "0" + myweekday;
        }
        return (myyear + "-" + mymonth + "-" + myweekday);
    }

    getLastWeekStartDate() {
        var now = new Date(); //当前日期
        var nowDayOfWeek = now.getDay() - 1; //今天本周的第几天
        var nowDay = now.getDate(); //当前日
        var nowMonth = now.getMonth(); //当前月
        var nowYear = now.getYear(); //当前年
        nowYear += (nowYear < 2000) ? 1900 : 0; //
        var lastMonthDate = new Date(); //上月日期
        lastMonthDate.setDate(1);
        lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
        var lastYear = lastMonthDate.getYear();
        var lastMonth = lastMonthDate.getMonth();
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 7);
        
        return this.formatDate(weekStartDate);
    }

    getLastWeekEndDate() {
        var now = new Date(); //当前日期
        var nowDayOfWeek = now.getDay() - 1; //今天本周的第几天
        var nowDay = now.getDate(); //当前日
        var nowMonth = now.getMonth(); //当前月
        var nowYear = now.getYear(); //当前年
        nowYear += (nowYear < 2000) ? 1900 : 0; //
        var lastMonthDate = new Date(); //上月日期
        lastMonthDate.setDate(1);
        lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
        var lastYear = lastMonthDate.getYear();
        var lastMonth = lastMonthDate.getMonth();
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 1);
        return this.formatDate(weekStartDate);
    }



    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        // var startTime = this.getBeforeWeekTime()
        // var endTime = this.getBeforeDayTime()
        var startTime = this.getLastWeekStartDate()
        var endTime = this.getLastWeekEndDate()

        getIndividualInspectNumRankApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                if (res.data.length == 0) {
                    this.setState({
                        columnData: [],
                        chartSearchData: [],
                        tableLoading: false,
                        isSearch: false
                    });
                } else {
                    let chartSearchData = {
                        key: [],
                        value: [],
                    };
                    res.data.forEach((item, index) => {
                        columnData.push({
                            key: index + 1,
                            username: item.username,
                            realInspectNum: item.realInspectNum,
                        });
                        chartSearchData.key.push(item.username);
                        chartSearchData.value.push(item.realInspectNum);
                    });
                    this.setState({
                        columnData: columnData,
                        searchChartLoading: false,
                        chartSearchData: chartSearchData,
                        tableLoading: false,
                        alertVisible: false,
                        isSearch: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }

    searchSubmit = (e) => {
        var schoolId;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.deadline == undefined && values.schools == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else {
                if (values.schools != undefined) {
                    schoolId = values.schools
                } else {
                    schoolId = sessionStorage.getItem("departmentId")
                }
                this.setState({
                    tableLoading: true
                });
                let columnData = [];
                getIndividualInspectNumRankApi(parseInt(schoolId), this.state.startTime, this.state.endTime)
                    .then((res) => {
                        if (res.data.length == 0) {
                            this.setState({
                                columnData: [],
                                chartSearchData: [],
                                tableLoading: false,
                                isSearch: false
                            });
                        } else {
                            let chartSearchData = {
                                key: [],
                                value: [],
                            };
                            res.data.forEach((item, index) => {
                                columnData.push({
                                    key: index + 1,
                                    username: item.username,
                                    realInspectNum: item.realInspectNum,
                                });
                                chartSearchData.key.push(item.username);
                                chartSearchData.value.push(item.realInspectNum);
                            });
                            this.setState({
                                columnData: columnData,
                                searchChartLoading: false,
                                chartSearchData: chartSearchData,
                                tableLoading: false,
                                alertVisible: false,
                                isSearch: true
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

            }
        });
    }
    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }
    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }
    handleSearchReset = clearFilters => () => {
        clearFilters();
    }
    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
        // this.setState({
        //     isSearch: false,
        // })
    }

    setFullScreen(opts) {
        this.setState({
            fullScreenVisible: true,
        })
        let fullchart = echarts.init(document.getElementById('fullScreen'))
        fullchart.setOption(opts);
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }
    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }

    }

    handleSelectTime1 = (date, dateString) => {
        console.log(date, dateString)
        const startDate = moment(date).isoWeekday(1).format('YYYY-MM-DD'); //周一日期
        // console.log("周一=====", startDate)
        if (dateString != '') {
            this.setState({
                startTime: startDate,
            })
        }
    }

    handleSelectTime2 = (date, dateString) => {

        console.log(date, dateString)
        const endDate = moment(date).isoWeekday(7).format('YYYY-MM-DD'); //周日日期
        console.log("周日======", endDate)
        if (dateString != '') {
            this.setState({
                endTime: endDate,
            })
        }
    }

    render() {
        // let branchCampusOptions;
        // if (this.state.branchCampus.length != 0) {
        //     branchCampusOptions = this.state.branchCampus.map((d, index) =>
        //         <Option value={d.id} key={index}>{d.name}</Option>
        //     );
        // }
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columnsSearch = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "姓名",
            dataIndex: "username",
            key: "username",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.username.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "巡检次数",
            dataIndex: "realInspectNum",
            key: "realInspectNum"
        }]
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };

        const title = '个人巡检次数排名如下'


        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="统计时段"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.getLastWeekStartDate(), dateFormat),
                                        moment(this.getLastWeekEndDate(), dateFormat),
                                    ],
                                })(
                                    // <RangePicker
                                    //     style={{ width: '100%' }}
                                    //     picker="week"
                                    //     format="YYYY-MM-DD"
                                    //     onChange={this.handleSelectTime} />
                                    <div>
                                        <WeekPicker picker="week" defaultValue={moment(this.getLastWeekStartDate(), dateFormat)} placeholder="请选择开始日期" onChange={this.handleSelectTime1} />~
                                         <WeekPicker picker="week" defaultValue={moment(this.getLastWeekEndDate(), dateFormat)} placeholder="请选择结束日期" onChange={this.handleSelectTime2} />
                                    </div>

                                )}



                            </FormItem>
                        </Col>
                        {/* <Col span={8}>
                            <FormItem
                                label="分校"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schools", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择完成情况">
                                        {branchCampusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col> */}
                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div>
                    {
                        this.state.isSearch ?
                            (
                                <div style={{
                                    marginBottom: 16,
                                    padding: 16,
                                    width: '100%',
                                    height: 300,
                                    border: '1px solid',
                                    borderColor: '#f5f5f5'
                                }}>
                                    <Skeleton loading={this.state.searchChartLoading} active>
                                        <ChartSearchIndividualInspectNumRank
                                            that={this}
                                            chartData={this.state.chartSearchData}
                                        />
                                    </Skeleton>
                                </div>
                            ) : null
                    }

                    <Alert
                        message="个人次数计算说明"
                        description={"个人次数：在统计时间范围内，巡检人员实际完成巡检项目次数之和，每巡检一项算一分。"}
                        type="info"
                        showIcon
                    />
                    <Table
                        dataSource={this.state.columnData}
                        columns={columnsSearch}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        onChange={this.handleChange2}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                        pagination={{  //分页
                            total: this.state.searchData.length, //数据总数量
                            defaultPageSize: 10, //默认显示几条一页
                            //pageSize: 10,
                            showTotal: function (total) {  //设置显示一共几条数据
                                return '共 ' + total + ' 条数据';
                            },
                            showSizeChanger: true,
                            showQuickJumper: true,
                            pageSizeOptions: [5, 10, 20, 30]
                        }} />
                </div>
            </div>
        );
    }
}

const InspectNumRank = Form.create()(inspectNumRank);

//巡检班组完成率
class inspectClassComplete extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            searchData: [],
            branchCampus: [],
            searchChartLoading: true,
            chartSearchData: {},
            startTime: "",
            endTime: "",
            isSearch: false,
            schoolId: sessionStorage.getItem("departmentId")
        };
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.refreshData();
    }
    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期
        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth() + 1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期
        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeweek
    }

    formatDate(date) {
        var myyear = date.getFullYear();
        var mymonth = date.getMonth() + 1;
        var myweekday = date.getDate();
        if (mymonth < 10) {
            mymonth = "0" + mymonth;
        }
        if (myweekday < 10) {
            myweekday = "0" + myweekday;
        }
        return (myyear + "-" + mymonth + "-" + myweekday);
    }

    getLastWeekStartDate() {
        var now = new Date(); //当前日期
        var nowDayOfWeek = now.getDay() - 1; //今天本周的第几天
        var nowDay = now.getDate(); //当前日
        var nowMonth = now.getMonth(); //当前月
        var nowYear = now.getYear(); //当前年
        nowYear += (nowYear < 2000) ? 1900 : 0; //
        var lastMonthDate = new Date(); //上月日期
        lastMonthDate.setDate(1);
        lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
        var lastYear = lastMonthDate.getYear();
        var lastMonth = lastMonthDate.getMonth();
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 7);
        return this.formatDate(weekStartDate);
    }

    getLastWeekEndDate() {
        var now = new Date(); //当前日期
        var nowDayOfWeek = now.getDay() - 1; //今天本周的第几天
        var nowDay = now.getDate(); //当前日
        var nowMonth = now.getMonth(); //当前月
        var nowYear = now.getYear(); //当前年
        nowYear += (nowYear < 2000) ? 1900 : 0; //
        var lastMonthDate = new Date(); //上月日期
        lastMonthDate.setDate(1);
        lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
        var lastYear = lastMonthDate.getYear();
        var lastMonth = lastMonthDate.getMonth();
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 1);
        return this.formatDate(weekStartDate);
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        // var startTime = this.getBeforeWeekTime()
        // var endTime = this.getBeforeDayTime()


        var startTime = this.getLastWeekStartDate()
        var endTime = this.getLastWeekEndDate()


        getInspectClassRatesApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                if (res.data.length == 0) {
                    this.setState({
                        columnData: [],
                        chartSearchData: [],
                        tableLoading: false,
                        isSearch: false
                    });
                } else {
                    let chartSearchData = {
                        key: [],
                        value: [],
                    };
                    res.data.forEach((item, index) => {
                        columnData.push({
                            key: index + 1,
                            inspectclass: item.inspectclass,
                            averageInspectClassRates: item.averageInspectClassRates + '%',
                        });
                        chartSearchData.key.push(item.inspectclass);
                        chartSearchData.value.push(item.averageInspectClassRates);
                    });
                    this.setState({
                        columnData: columnData,
                        searchChartLoading: false,
                        chartSearchData: chartSearchData,
                        tableLoading: false,
                        alertVisible: false,
                        isSearch: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }

    searchSubmit = (e) => {
        var schoolId;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.deadline == undefined && values.schools == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else {
                if (values.schools != undefined) {
                    schoolId = values.schools
                } else {
                    schoolId = sessionStorage.getItem("departmentId")
                }
                this.setState({
                    tableLoading: true
                });
                let columnData = [];
                getInspectClassRatesApi(parseInt(schoolId), this.state.startTime, this.state.endTime)
                    .then((res) => {
                        if (res.data.length == 0) {
                            this.setState({
                                columnData: [],
                                chartSearchData: [],
                                tableLoading: false,
                                isSearch: false
                            });
                        } else {
                            let chartSearchData = {
                                key: [],
                                value: [],
                            };
                            res.data.forEach((item, index) => {
                                columnData.push({
                                    key: index + 1,
                                    inspectclass: item.inspectclass,
                                    averageInspectClassRates: item.averageInspectClassRates + '%',
                                });
                                chartSearchData.key.push(item.inspectclass);
                                chartSearchData.value.push(item.averageInspectClassRates);
                            });
                            this.setState({
                                columnData: columnData,
                                searchChartLoading: false,
                                chartSearchData: chartSearchData,
                                tableLoading: false,
                                alertVisible: false,
                                isSearch: true
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

            }
        });
    }
    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }
    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }
    handleSearchReset = clearFilters => () => {
        clearFilters();
    }
    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
        // this.setState({
        //     isSearch: false,
        // })
    }

    setFullScreen(opts) {
        this.setState({
            fullScreenVisible: true,
        })
        let fullchart = echarts.init(document.getElementById('fullScreen'))
        fullchart.setOption(opts);
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }
    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }

    }

    handleSelectTime1 = (date, dateString) => {
        console.log(date, dateString)
        const startDate = moment(date).isoWeekday(1).format('YYYY-MM-DD'); //周一日期
        // console.log("周一=====", startDate)
        if (dateString != '') {
            this.setState({
                startTime: startDate,
            })
        }
    }

    handleSelectTime2 = (date, dateString) => {
        console.log(date, dateString)
        const endDate = moment(date).isoWeekday(7).format('YYYY-MM-DD'); //周日日期
        // console.log("周日======", endDate)
        if (dateString != '') {
            this.setState({
                endTime: endDate,
            })
        }
    }

    render() {
        // let branchCampusOptions;
        // if (this.state.branchCampus.length != 0) {
        //     branchCampusOptions = this.state.branchCampus.map((d, index) =>
        //         <Option value={d.id} key={index}>{d.name}</Option>
        //     );
        // }
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columnsSearch = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "巡检班组",
            dataIndex: "inspectclass",
            key: "inspectclass",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.username.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "完成率",
            dataIndex: "averageInspectClassRates",
            key: "averageInspectClassRates"
        }]
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };

        const title = '个人巡检次数排名如下'


        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="统计时段"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.getBeforeWeekTime(), dateFormat),
                                        moment(this.getBeforeDayTime(), dateFormat),
                                    ],
                                })(
                                    // <RangePicker
                                    //     style={{ width: '100%' }}
                                    //     format="YYYY-MM-DD"
                                    //     onChange={this.handleSelectTime} />
                                    <div>
                                        <WeekPicker picker="week" defaultValue={moment(this.getBeforeWeekTime(), dateFormat)} placeholder="请选择开始日期" onChange={this.handleSelectTime1} />~
                                        <WeekPicker picker="week" defaultValue={moment(this.getBeforeWeekTime(), dateFormat)} placeholder="请选择结束日期" onChange={this.handleSelectTime2} />
                                    </div>
                                )}
                            </FormItem>
                        </Col>
                        {/* <Col span={8}>
                            <FormItem
                                label="分校"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schools", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择完成情况">
                                        {branchCampusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col> */}
                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div>
                    {
                        this.state.isSearch ?
                            (
                                <div style={{
                                    marginBottom: 16,
                                    padding: 16,
                                    width: '100%',
                                    height: 300,
                                    border: '1px solid',
                                    borderColor: '#f5f5f5'
                                }}>
                                    <Skeleton loading={this.state.searchChartLoading} active>
                                        <ChartSearchInspectClassComplete
                                            that={this}
                                            chartData={this.state.chartSearchData}
                                        />
                                    </Skeleton>
                                </div>
                            ) : null
                    }
                    <Alert
                        message="班组完成率计算说明"
                        description={"班组完成率：在统计时间范围内，该班组实际完成巡检项目次数 / 计划完成巡检项目次数。"}
                        type="info"
                        showIcon
                    />
                    <Table
                        dataSource={this.state.columnData}
                        columns={columnsSearch}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        onChange={this.handleChange2}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                        pagination={{  //分页
                            total: this.state.searchData.length, //数据总数量
                            defaultPageSize: 10, //默认显示几条一页
                            //pageSize: 10,
                            showTotal: function (total) {  //设置显示一共几条数据
                                return '共 ' + total + ' 条数据';
                            },
                            showSizeChanger: true,
                            showQuickJumper: true,
                            pageSizeOptions: [5, 10, 20, 30]
                        }} />
                </div>
            </div>
        );
    }
}

const InspectClassComplete = Form.create()(inspectClassComplete);

//个人巡检积分
class inspectPoints extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            searchData: [],
            branchCampus: [],
            searchChartLoading: true,
            chartSearchData: {},
            startTime: "",
            endTime: "",
            isSearch: false,
            schoolId: sessionStorage.getItem("departmentId")
        };
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.refreshData();
    }
    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期
        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth() + 1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期
        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeweek
    }

    formatDate(date) {
        var myyear = date.getFullYear();
        var mymonth = date.getMonth() + 1;
        var myweekday = date.getDate();
        if (mymonth < 10) {
            mymonth = "0" + mymonth;
        }
        if (myweekday < 10) {
            myweekday = "0" + myweekday;
        }
        return (myyear + "-" + mymonth + "-" + myweekday);
    }

    getLastWeekStartDate() {
        var now = new Date(); //当前日期
        var nowDayOfWeek = now.getDay() - 1; //今天本周的第几天
        var nowDay = now.getDate(); //当前日
        var nowMonth = now.getMonth(); //当前月
        var nowYear = now.getYear(); //当前年
        nowYear += (nowYear < 2000) ? 1900 : 0; //
        var lastMonthDate = new Date(); //上月日期
        lastMonthDate.setDate(1);
        lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
        var lastYear = lastMonthDate.getYear();
        var lastMonth = lastMonthDate.getMonth();
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 7);
        return this.formatDate(weekStartDate);
    }

    getLastWeekEndDate() {
        var now = new Date(); //当前日期
        var nowDayOfWeek = now.getDay() - 1; //今天本周的第几天
        var nowDay = now.getDate(); //当前日
        var nowMonth = now.getMonth(); //当前月
        var nowYear = now.getYear(); //当前年
        nowYear += (nowYear < 2000) ? 1900 : 0; //
        var lastMonthDate = new Date(); //上月日期
        lastMonthDate.setDate(1);
        lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
        var lastYear = lastMonthDate.getYear();
        var lastMonth = lastMonthDate.getMonth();
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 1);
        return this.formatDate(weekStartDate);
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        // var startTime = this.getBeforeWeekTime()
        // var endTime = this.getBeforeDayTime()

        var startTime = this.getLastWeekStartDate()
        var endTime = this.getLastWeekEndDate()


        getIndividualInspectPointsRankApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                if (res.data.length == 0) {
                    this.setState({
                        columnData: [],
                        chartSearchData: [],
                        tableLoading: false,
                        isSearch: false
                    });
                } else {
                    let chartSearchData = {
                        key: [],
                        value: [],
                        average: []
                    };
                    res.data.forEach((item, index) => {
                        columnData.push({
                            key: index + 1,
                            username: item.username,
                            inspectpoints: item.inspectpoints,
                            averageInspectPoints: item.averageInspectPoints,
                        });
                        chartSearchData.key.push(item.username);
                        chartSearchData.value.push(item.inspectpoints);
                        chartSearchData.average.push(item.averageInspectPoints);
                    });
                    this.setState({
                        columnData: columnData,
                        searchChartLoading: false,
                        chartSearchData: chartSearchData,
                        tableLoading: false,
                        alertVisible: false,
                        isSearch: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }

    searchSubmit = (e) => {
        var schoolId;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.deadline == undefined && values.schools == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else {
                if (values.schools != undefined) {
                    schoolId = values.schools
                } else {
                    schoolId = sessionStorage.getItem("departmentId")
                }
                this.setState({
                    tableLoading: true
                });
                let columnData = [];
                getIndividualInspectPointsRankApi(parseInt(schoolId), this.state.startTime, this.state.endTime)
                    .then((res) => {
                        if (res.data.length == 0) {
                            this.setState({
                                columnData: [],
                                chartSearchData: [],
                                tableLoading: false,
                                isSearch: false
                            });
                        } else {
                            let chartSearchData = {
                                key: [],
                                value: [],
                                average: []
                            };
                            res.data.forEach((item, index) => {
                                columnData.push({
                                    key: index + 1,
                                    username: item.username,
                                    inspectpoints: item.inspectpoints,
                                    averageInspectPoints: item.averageInspectPoints,
                                });
                                chartSearchData.key.push(item.username);
                                chartSearchData.value.push(item.inspectpoints);
                                chartSearchData.average.push(item.averageInspectPoints);
                            });
                            this.setState({
                                columnData: columnData,
                                searchChartLoading: false,
                                chartSearchData: chartSearchData,
                                tableLoading: false,
                                alertVisible: false,
                                isSearch: true
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

            }
        });
    }
    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }
    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }
    handleSearchReset = clearFilters => () => {
        clearFilters();
    }
    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
        // this.setState({
        //     isSearch: false,
        // })
    }

    setFullScreen(opts) {
        this.setState({
            fullScreenVisible: true,
        })
        let fullchart = echarts.init(document.getElementById('fullScreen'))
        fullchart.setOption(opts);
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }
    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }

    }

    handleSelectTime1 = (date, dateString) => {
        console.log(date, dateString)
        const startDate = moment(date).isoWeekday(1).format('YYYY-MM-DD'); //周一日期
        // console.log("周一=====", startDate)
        if (dateString != '') {
            this.setState({
                startTime: startDate,
            })
        }
    }

    handleSelectTime2 = (date, dateString) => {
        console.log(date, dateString)
        const endDate = moment(date).isoWeekday(7).format('YYYY-MM-DD'); //周日日期
        // console.log("周日======", endDate)
        if (dateString != '') {
            this.setState({
                endTime: endDate,
            })
        }
    }

    render() {
        // let branchCampusOptions;
        // if (this.state.branchCampus.length != 0) {
        //     branchCampusOptions = this.state.branchCampus.map((d, index) =>
        //         <Option value={d.id} key={index}>{d.name}</Option>
        //     );
        // }
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columnsSearch = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "姓名",
            dataIndex: "username",
            key: "username",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.username.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "积分",
            dataIndex: "inspectpoints",
            key: "inspectpoints"
        }]
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };

        const title = '个人巡检次数排名如下'


        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="统计时段"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.getBeforeWeekTime(), dateFormat),
                                        moment(this.getBeforeDayTime(), dateFormat),
                                    ],
                                })(
                                    // <RangePicker
                                    //     style={{ width: '100%' }}
                                    //     format="YYYY-MM-DD"
                                    //     onChange={this.handleSelectTime} />
                                    <div>
                                        <WeekPicker picker="week" defaultValue={moment(this.getBeforeWeekTime(), dateFormat)} placeholder="请选择开始日期" onChange={this.handleSelectTime1} />~
                                        <WeekPicker picker="week" defaultValue={moment(this.getBeforeWeekTime(), dateFormat)} placeholder="请选择结束日期" onChange={this.handleSelectTime2} />
                                    </div>
                                )}
                            </FormItem>
                        </Col>
                        {/* <Col span={8}>
                            <FormItem
                                label="分校"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schools", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择完成情况">
                                        {branchCampusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col> */}
                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div>
                    {
                        this.state.isSearch ?
                            (
                                <div style={{
                                    marginBottom: 16,
                                    padding: 16,
                                    width: '100%',
                                    height: 300,
                                    border: '1px solid',
                                    borderColor: '#f5f5f5'
                                }}>
                                    <Skeleton loading={this.state.searchChartLoading} active>
                                        <ChartSearchInspectpoints
                                            that={this}
                                            chartData={this.state.chartSearchData}
                                        />
                                    </Skeleton>
                                </div>
                            ) : null
                    }
                    <Alert
                        message="个人积分计算说明"
                        description={"个人积分：在统计时间范围内，巡检人员实际完成巡检项目次数 + 发现安全安全隐患个数 * 5。"}
                        type="info"
                        showIcon
                    />
                    <Table
                        dataSource={this.state.columnData}
                        columns={columnsSearch}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        onChange={this.handleChange2}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                        pagination={{  //分页
                            total: this.state.searchData.length, //数据总数量
                            defaultPageSize: 10, //默认显示几条一页
                            //pageSize: 10,
                            showTotal: function (total) {  //设置显示一共几条数据
                                return '共 ' + total + ' 条数据';
                            },
                            showSizeChanger: true,
                            showQuickJumper: true,
                            pageSizeOptions: [5, 10, 20, 30]
                        }} />
                </div>
            </div>
        );
    }
}

const InspectPoints = Form.create()(inspectPoints);

//巡检班组积分
class inspectClassPoints extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            filteredInfo: null,
            sortedInfo: null,
            searchData: [],
            branchCampus: [],
            searchChartLoading: true,
            chartSearchData: {},
            startTime: "",
            endTime: "",
            isSearch: false,
            schoolId: sessionStorage.getItem("departmentId"),
            averageInspectClassPoints: 0
        };
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.refreshData();
    }
    getBeforeDayTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000;
        var beforeday = new Date(time); // 获取的是前一天日期
        beforeday = beforeday.getFullYear() + "-" + (beforeday.getMonth() + 1 > 9
            ? (beforeday.getMonth() + 1) : "0" + (beforeday.getMonth() + 1)) + "-" + (beforeday.getDate() > 9
                ? (beforeday.getDate()) : "0" + (beforeday.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeday
    }
    getBeforeWeekTime() {
        var time = (new Date()).getTime() - 24 * 60 * 60 * 1000 * 7;
        var beforeweek = new Date(time); // 获取的是前一周日期
        beforeweek = beforeweek.getFullYear() + "-" + (beforeweek.getMonth() + 1 > 9
            ? (beforeweek.getMonth() + 1) : "0" + (beforeweek.getMonth() + 1)) + "-" + (beforeweek.getDate() > 9
                ? (beforeweek.getDate()) : "0" + (beforeweek.getDate())); //字符串拼接转格式：例如2018-08-19
        return beforeweek
    }

    formatDate(date) {
        var myyear = date.getFullYear();
        var mymonth = date.getMonth() + 1;
        var myweekday = date.getDate();
        if (mymonth < 10) {
            mymonth = "0" + mymonth;
        }
        if (myweekday < 10) {
            myweekday = "0" + myweekday;
        }
        return (myyear + "-" + mymonth + "-" + myweekday);
    }

    getLastWeekStartDate() {
        var now = new Date(); //当前日期
        var nowDayOfWeek = now.getDay() - 1; //今天本周的第几天
        var nowDay = now.getDate(); //当前日
        var nowMonth = now.getMonth(); //当前月
        var nowYear = now.getYear(); //当前年
        nowYear += (nowYear < 2000) ? 1900 : 0; //
        var lastMonthDate = new Date(); //上月日期
        lastMonthDate.setDate(1);
        lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
        var lastYear = lastMonthDate.getYear();
        var lastMonth = lastMonthDate.getMonth();
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 7);
        return this.formatDate(weekStartDate);
    }

    getLastWeekEndDate() {
        var now = new Date(); //当前日期
        var nowDayOfWeek = now.getDay() - 1; //今天本周的第几天
        var nowDay = now.getDate(); //当前日
        var nowMonth = now.getMonth(); //当前月
        var nowYear = now.getYear(); //当前年
        nowYear += (nowYear < 2000) ? 1900 : 0; //
        var lastMonthDate = new Date(); //上月日期
        lastMonthDate.setDate(1);
        lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
        var lastYear = lastMonthDate.getYear();
        var lastMonth = lastMonthDate.getMonth();
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 1);
        return this.formatDate(weekStartDate);
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        // var startTime = this.getBeforeWeekTime()
        // var endTime = this.getBeforeDayTime()
        var startTime = this.getLastWeekStartDate()
        var endTime = this.getLastWeekEndDate()

        getInspectClassPointsRankApi(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                if (res.data.length == 0) {
                    this.setState({
                        columnData: [],
                        chartSearchData: [],
                        tableLoading: false,
                        isSearch: false
                    });
                } else {
                    let chartSearchData = {
                        key: [],
                        value: [],
                    };
                    let averageInspectClassPoints = '';

                    res.data.forEach((item, index) => {
                        columnData.push({
                            key: index + 1,
                            inspectclass: item.inspectclass,
                            inspectclasspoints: item.inspectclasspoints,
                        });
                        chartSearchData.key.push(item.inspectclass);
                        chartSearchData.value.push(item.inspectclasspoints);
                        averageInspectClassPoints = item.averageInspectClassPoints;
                    });


                    this.setState({
                        columnData: columnData,
                        searchChartLoading: false,
                        chartSearchData: chartSearchData,
                        averageInspectClassPoints: averageInspectClassPoints,
                        tableLoading: false,
                        alertVisible: false,
                        isSearch: true
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

    }

    searchSubmit = (e) => {
        var schoolId;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (values.deadline == undefined && values.schools == undefined) {
                message.error('请至少填写一项条件再进行搜索');
            } else {
                if (values.schools != undefined) {
                    schoolId = values.schools
                } else {
                    schoolId = sessionStorage.getItem("departmentId")
                }
                this.setState({
                    tableLoading: true
                });
                let columnData = [];
                getInspectClassPointsRankApi(parseInt(schoolId), this.state.startTime, this.state.endTime)
                    .then((res) => {
                        if (res.data.length == 0) {
                            this.setState({
                                columnData: [],
                                chartSearchData: [],
                                tableLoading: false,
                                isSearch: false
                            });
                        } else {
                            let chartSearchData = {
                                key: [],
                                value: [],
                            };
                            let averageInspectClassPoints = '';

                            res.data.forEach((item, index) => {
                                columnData.push({
                                    key: index + 1,
                                    inspectclass: item.inspectclass,
                                    inspectclasspoints: item.inspectclasspoints,
                                });
                                chartSearchData.key.push(item.inspectclass);
                                chartSearchData.value.push(item.inspectclasspoints);
                                averageInspectClassPoints = item.averageInspectClassPoints;
                            });


                            this.setState({
                                columnData: columnData,
                                searchChartLoading: false,
                                chartSearchData: chartSearchData,
                                averageInspectClassPoints: averageInspectClassPoints,
                                tableLoading: false,
                                alertVisible: false,
                                isSearch: true
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });

            }
        });
    }
    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });
    }
    handleChange = (pagination, filters, sorter) => {
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }
    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }
    handleSearchReset = clearFilters => () => {
        clearFilters();
    }
    onRef = (ref) => {
        this.child = ref
    }

    searchReset = () => {
        this.props.form.resetFields();
        // this.setState({
        //     isSearch: false,
        // })
    }

    setFullScreen(opts) {
        this.setState({
            fullScreenVisible: true,
        })
        let fullchart = echarts.init(document.getElementById('fullScreen'))
        fullchart.setOption(opts);
    }

    fullScreenCancel() {
        this.setState({
            fullScreenVisible: false,
        })
    }
    handleSelectTime = (value, dateString) => {
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
            })
        }

    }

    handleSelectTime1 = (date, dateString) => {
        console.log(date, dateString)
        const startDate = moment(date).isoWeekday(1).format('YYYY-MM-DD'); //周一日期
        // console.log("周一=====", startDate)
        if (dateString != '') {
            this.setState({
                startTime: startDate,
            })
        }
    }

    handleSelectTime2 = (date, dateString) => {
        console.log(date, dateString)
        const endDate = moment(date).isoWeekday(7).format('YYYY-MM-DD'); //周日日期
        // console.log("周日======", endDate)
        if (dateString != '') {
            this.setState({
                endTime: endDate,
            })
        }
    }

    render() {
        // let branchCampusOptions;
        // if (this.state.branchCampus.length != 0) {
        //     branchCampusOptions = this.state.branchCampus.map((d, index) =>
        //         <Option value={d.id} key={index}>{d.name}</Option>
        //     );
        // }
        const { getFieldDecorator, getFieldValue } = this.props.form;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columnsSearch = [{
            title: "序号",
            dataIndex: "key",
            key: "key"
        }, {
            title: "巡检班组",
            dataIndex: "inspectclass",
            key: "inspectclass",
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            onFilter: (value, record) => record.username.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: "积分",
            dataIndex: "inspectclasspoints",
            key: "inspectclasspoints"
        }]
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };

        const title = '个人巡检次数排名如下'


        return (
            <div style={{ marginBottom: 16 }}>
                <Form style={{
                    padding: '12px',
                    backgroundColor: '#fafafa',
                    borderRadius: 8,
                    marginBottom: 16,
                }}
                    layout="inline"
                    onSubmit={this.searchSubmit}>
                    <Row>
                        <Col span={8}>
                            <FormItem
                                label="统计时段"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("deadline", {
                                    rules: [{
                                        type: 'array',
                                        required: false,
                                    }],
                                    initialValue: [ // 核心代码
                                        moment(this.getBeforeWeekTime(), dateFormat),
                                        moment(this.getBeforeDayTime(), dateFormat),
                                    ],
                                })(
                                    // <RangePicker
                                    //     style={{ width: '100%' }}
                                    //     format="YYYY-MM-DD"
                                    //     onChange={this.handleSelectTime} />
                                    <div>
                                        <WeekPicker picker="week" defaultValue={moment(this.getBeforeWeekTime(), dateFormat)} placeholder="请选择开始日期" onChange={this.handleSelectTime1} />~
                                        <WeekPicker picker="week" defaultValue={moment(this.getBeforeWeekTime(), dateFormat)} placeholder="请选择结束日期" onChange={this.handleSelectTime2} />
                                    </div>
                                )}
                            </FormItem>
                        </Col>
                        {/* <Col span={8}>
                            <FormItem
                                label="分校"
                                style={{ width: '100%' }}
                                labelCol={labelCol}
                                wrapperCol={wrapperCol}>
                                {getFieldDecorator("schools", {
                                    rules: [{
                                        required: false,
                                    }]
                                })(
                                    <Select
                                        allowClear={true}
                                        style={{ width: '100%' }}
                                        placeholder="请选择完成情况">
                                        {branchCampusOptions}
                                    </Select>
                                )}
                            </FormItem>
                        </Col> */}
                        <Col>
                            <FormItem
                                style={{ float: 'right' }}>
                                <Button type="primary" htmlType="submit">搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div>
                    {
                        this.state.isSearch ?
                            (
                                <div style={{
                                    marginBottom: 16,
                                    padding: 16,
                                    width: '100%',
                                    height: 300,
                                    border: '1px solid',
                                    borderColor: '#f5f5f5'
                                }}>
                                    <Skeleton loading={this.state.searchChartLoading} active>
                                        <ChartSearchInspectClasspoints
                                            that={this}
                                            chartData={this.state.chartSearchData}
                                            averageInspectClassPoints={this.state.averageInspectClassPoints}
                                        />
                                    </Skeleton>
                                </div>
                            ) : null
                    }

                    <Alert
                        message="班组巡检积分计算说明"
                        description={"班组积分：在统计时间范围内，班组实际完成巡检项目次数-未完成巡检项目次数 * 0.5 + 该班组成员发现安全隐患个数 * 5。"}
                        type="info"
                        showIcon
                    />
                    <Table
                        dataSource={this.state.columnData}
                        columns={columnsSearch}
                        loading={this.state.tableLoading}
                        locale={{ emptyText: '暂无数据' }}
                        onChange={this.handleChange2}
                        rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                        pagination={{  //分页
                            total: this.state.searchData.length, //数据总数量
                            defaultPageSize: 10, //默认显示几条一页
                            //pageSize: 10,
                            showTotal: function (total) {  //设置显示一共几条数据
                                return '共 ' + total + ' 条数据';
                            },
                            showSizeChanger: true,
                            showQuickJumper: true,
                            pageSizeOptions: [5, 10, 20, 30]
                        }} />
                </div>
            </div>
        );
    }
}

const InspectClassPoints = Form.create()(inspectClassPoints);


class ChartSearchIndividualInspectNumRank extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        if (JSON.stringify(this.state.chartData) != '{}') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch'));
            chart.setOption({
                title: {
                    text: '个人巡检次数排名如下',
                    left: 'center',
                    top: '-2px'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5px',
                    // top: '30px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.state.chartData.key,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}次',
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '巡检次数',
                        type: 'bar',
                        barGap: '100%',
                        barMaxWidth: 25,
                        animation: false,
                        data: this.state.chartData.value,
                        itemStyle:
                            {
                                color: 'rgb(255, 70, 131)',
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 14
                                        }
                                    }
                                }
                            },
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        markLine: {
                            // label: { formatter: '平均值: '},
                            // symbol: 'none',
                            data: [{
                                type: 'average',
                                name: '平均值',
                            }]
                        },
                    },

                ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch' style={chartStyle} />)
    }
}

class ChartSearchInspectClassComplete extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        if (JSON.stringify(this.state.chartData) != '{}') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch'));
            chart.setOption({
                title: {
                    text: '班组完成率排名如下',
                    left: 'center',
                    top: '-2px'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5px',
                    // top: '30px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.state.chartData.key,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}%',
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '完成率',
                        type: 'bar',
                        barGap: '100%',
                        barMaxWidth: 25,
                        animation: false,
                        data: this.state.chartData.value,
                        itemStyle:
                            {
                                color: 'rgb(255, 70, 131)',
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 14
                                        }
                                    }
                                }
                            },
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        markLine: {
                            //label: { formatter: '平均值: '},
                            //symbol: 'none',
                            data: [{
                                type: 'average',
                                name: '平均值',
                            }]
                        },
                    }
                ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch' style={chartStyle} />)
    }
}


class ChartSearchInspectpoints extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        if (JSON.stringify(this.state.chartData) != '{}') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch'));
            chart.setOption({
                title: {
                    text: '个人积分排名如下',
                    left: 'center',
                    top: '-2px'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5px',
                    // top: '30px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.state.chartData.key,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}分',
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '积分',
                        type: 'bar',
                        barGap: '100%',
                        barMaxWidth: 25,
                        animation: false,
                        data: this.state.chartData.value,
                        itemStyle:
                            {
                                color: 'rgb(255, 70, 131)',
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 14
                                        }
                                    }
                                }
                            },
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        markLine: {
                            // label: { formatter: '平均值: '},
                            // symbol: 'none',
                            data: [{
                                type: 'average',
                                name: '平均值',
                            }]
                        },
                    }
                ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch' style={chartStyle} />)
    }
}



class ChartSearchInspectClasspoints extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            that: props.that
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.chartData) != JSON.stringify(this.state.chartData)) {
            this.setState({
                chartData: props.chartData,
                that: props.that
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        if (JSON.stringify(this.state.chartData) != '{}') {
            // console.log(this.state.chartData);
            let chart = echarts.init(document.getElementById('chartSearch'));
            chart.setOption({
                title: {
                    text: '班组积分排名如下',
                    left: 'center',
                    top: '-2px'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5px',
                    // top: '30px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.state.chartData.key,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}分',
                            textStyle: {
                                fontSize: 16
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '积分',
                        type: 'bar',
                        barGap: '100%',
                        barMaxWidth: 25,
                        animation: false,
                        data: this.state.chartData.value,
                        itemStyle:
                            {
                                color: 'rgb(255, 70, 131)',
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'black',
                                            fontSize: 14
                                        }
                                    }
                                }
                            },
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        markLine: {
                            // label: { formatter: '平均值: '},
                            // symbol: 'none',
                            data: [{
                                type: 'average',
                                name: '平均值',
                            }]
                        },
                    }
                ]
            })
            window.onresize = chart.resize;
        }

    }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (<div id='chartSearch' style={chartStyle} />)
    }
}


export { PatrolNumRank, PatrolRatesRank, PatrolPointsRank, DangerNumRank, DangerCategory, DangerDealRate, InspectNumRank, InspectPoints, InspectClassComplete, InspectClassPoints };
